<template>
  <a-spin :loading="store.loading" style="width: 100%">
    <a-card class="general-card">
      <template #title>
        {{ `优秀教师展示` }}
      </template>
      <template #extra>
        <a-link @click="$router.push('/teacher')">{{
          $t('workplace.viewMore')
        }}</a-link>
      </template>
      <a-carousel
        :style="{
          width: '100%',
          height: '350px',
        }"
        show-arrow="hover"
        direction="vertical"
        indicator-position="right"
        :auto-play="true"
        indicator-type="line"
      >
        <a-carousel-item v-for="image in store.teacher">
          <a-image
            :src="image"
            fit="fill"
            :show-loader="store.loading"
            width="100%"
            height="100%"
            :style="{
              width: '100%',
              height: '100%',
            }"
          />
        </a-carousel-item>
      </a-carousel>
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useIndexStore } from '@/store';
  const store = useIndexStore();
</script>

<style scoped lang="less">
  .general-card {
    // max-height: 425px;
  }
</style>
